<template>

  <div class="main">
    <a-space direction="vertical" :size="16" class="grid">
      <a-row justify="start">
        <a-col :span="2" ><a-input v-model="userQuery.userName" placeholder="用户名称"  /></a-col>
        <a-col :span="2" class="row"><a-input v-model="userQuery.userInfo" placeholder="用户信息" /></a-col>
        <a-col :span="2" class="row"><a-input v-model="userQuery.userJob" placeholder="用户职位" /></a-col>
        <a-col :span="2" class="row">
          <a-select v-model="userQuery.status" placeholder="请选择状态" allow-clear>
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-col>
        <a-col :span="1" class="row"><a-button type="outline" @click="getList" >查询</a-button></a-col>
      </a-row>
    </a-space>


    <a-table :data="data" row-key="id" :row-selection="selectList"
             :scroll="scroll" :scrollbar="scrollbar"
             v-model:selectedKeys="selectList" :pagination="false"
             style="background-color: white;">
      <template #columns>
        <a-table-column title="编号" data-index="id"></a-table-column>
        <a-table-column title="名称" data-index="userName"></a-table-column>
        <a-table-column title="信息" data-index="userInfo"></a-table-column>
        <a-table-column title="头像">
          <template #cell="{record}">
            <a-image :src=" url + record.file[0].clientUrl" width="100" height="100"></a-image>
          </template>
        </a-table-column>
        <a-table-column title="职位" data-index="userJob"></a-table-column>
        <a-table-column title="状态" data-index="status"></a-table-column>
        <a-table-column title="上传人" data-index="uploader"></a-table-column>
        <a-table-column title="上传时间" data-index="updateTime"></a-table-column>
        <a-table-column title="操作">
          <template #cell="{record}">
            <a-button type="text" @click="select(record)">选择</a-button>
          </template>
        </a-table-column>
      </template>

      <template #footer>
        <a-pagination v-model:current="userQuery.pageNum" :total="userQuery.total"
                      v-model:page-size="userQuery.pageSize" @page-size-userQuery="getList"
                      @change="getList"
                      show-total show-jumper show-page-size/>
      </template>
    </a-table>


    <UserFormData  ref="sampleFormData"
                   v-model:vis="visible"
                   v-model:dto="userDto"
                   v-model:tit="title"
                   v-model:api="api"
                   @ok="getList"
    >
    </UserFormData>






  </div>

</template>

<script lang="ts" setup>



import type {Reactive} from "vue-demi";
import {ref} from 'vue';
import type {Ref} from "vue-demi";
import {Notification} from "@arco-design/web-vue";
import type {UserDto, UserQuery} from "@/apis/sample/user";
import UserFormData from "@/views/sample/user/UserFormData.vue";
import {useUserStore} from "@/stores";
import {delUser, queryUser, QueryUserById} from "@/apis/sample/user";



const selectList = ref([])
const data:Ref<UserDto[]> = ref([])
const visible = ref(false);



const title = ref('')
const scrollbar = ref(true);
const api = ref('')
const scroll = {
  x: 1200,
  y: 700
};

const url = import.meta.env.VITE_API_BASE_URL;


const userQuery:Reactive<UserQuery> = reactive({
  id:null,
  userName:null,
  userInfo:null,
  userJob:null,
  uploader:null,
  pageNum:1,
  pageSize:10,
  total:0,
  status:null,
})

const userDto:Reactive<UserDto> = reactive({
  id:0,
  userName:'',
  userInfo:'',
  userImg:'',
  userJob:'',
  uploader:useUserStore().userInfo.id,
  updateTime:'',
  status:null,
})

const flat = defineEmits(['select'])

/**
 * 选择按钮
 * */
const select = (data:any) => {

  flat('select',data)

}

/**
 * 获得列表
 * */
const getList =  () => {
  queryUser(userQuery).then(res =>{
    console.log(res)
    data.value = res.data.data.records
    userQuery.total = res.data.data.total
  })

}


getList()

</script>

<style lang="scss" scoped>
.group {
  .img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 10px;
  }
  display: flex;
}

.grid {
  .row {
    margin: 0 10px;
  }
  margin: 10px;
  padding: 10px;
  background-color: white;
}
</style>